html,body{ min-width: 1200px; width: 100%; height: 100%; overflow: hidden;}
.v-align{ position: absolute; top: 50%; -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -o-transform: translate(0, -50%); transform: translate(0, -50%);}
.a-align{ position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.web{ width: 1200px; padding-top: 90px; overflow: hidden;}
.block-img{ display: block; width: 100%;}
.transition{ -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s;}

.first-page{ background: url(../webimages/cimg01.jpg) center no-repeat; -webkit-background-size: cover; background-size: cover;}
.second-page{ background: url(../webimages/cimg02.jpg) center no-repeat; -webkit-background-size: cover; background-size: cover;} 
.second-page .bg{ width: 100%; height: 100%; background: url(../webimages/cimg11.png) center no-repeat; -webkit-background-size: cover; background-size: cover;}
.third-page{ background-color: #fff;} 
.third-page .bg{ width: 100%; height: 100%; background: url(../webimages/cimg12.png) center no-repeat; -webkit-background-size: cover; background-size: cover;}
.four-page{ background: url(../webimages/cimg08.jpg) center no-repeat; -webkit-background-size: cover; background-size: cover;}
.five-page{ background-color: #313131;}

.header{ width: 100%; height: 90px; position: fixed; top: 0; left: 0; z-index: 2;}
.header:after{ content: ''; position: absolute; width: 100%; height: 1px; background-color: #ccc; color: #ccc; left: 50%; bottom: 0; -webkit-transform: translate(-50%, 0) scale(0); -moz-transform: translate(-50%, 0) scale(0); -ms-transform: translate(-50%, 0) scale(0); -o-transform: translate(-50%, 0) scale(0); transform: translate(-50%, 0) scale(0); -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; transition: all 1s;}
.header .logo{ left: 12.29%; width: 6.35%; padding: 1.4% 0; min-width: 78px;}
.header .logo img{ width: 100%; display: block; position: absolute; top: 0; left: 0; -webkit-transition: opacity .3s; -moz-transition: opacity .3s; -ms-transition: opacity .3s; -o-transition: opacity .3s; transition: opacity .3s;}
.header .white-logo{ opacity: 1;}
.header .colorful-logo{ opacity: 0;}

.header .nav{ right: 4.68%; width: 80%; text-align: right;}
.header .nav a{ display: inline-block; color: #fff; font-size: 20px; line-height: 40px; padding: 4px 0; margin: 0 2%; position: relative;}
.header .nav a:after{ content: ''; width: 100%; height: 2px; background-color: #00b7ee; position: absolute; bottom: 0; left: 50%; -webkit-transform: translate(-50%, 0) scale(0); -moz-transform: translate(-50%, 0) scale(0); -ms-transform: translate(-50%, 0) scale(0); -o-transform: translate(-50%, 0) scale(0); transform: translate(-50%, 0) scale(0); -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s;}
.header .nav a.active:after{ -webkit-transform: translate(-50%, 0) scale(1); -moz-transform: translate(-50%, 0) scale(1); -ms-transform: translate(-50%, 0) scale(1); -o-transform: translate(-50%, 0) scale(1); transform: translate(-50%, 0) scale(1);}

.header.inverse-white:after{ -webkit-transform: translate(-50%, 0) scale(1); -moz-transform: translate(-50%, 0) scale(1); -ms-transform: translate(-50%, 0) scale(1); -o-transform: translate(-50%, 0) scale(1); transform: translate(-50%, 0) scale(1);}
.header.inverse-white{ background-color: #fff;}
.header.inverse-white .white-logo{ opacity: 0;}
.header.inverse-white .colorful-logo{ opacity: 1;}
.header.inverse-white .nav a{ color: #333;}

.first-page{}
.first-info{ color: #fff; position: absolute; left: 12.29%; top: 210px; opacity: 0; z-index: 2; -webkit-transform: translate(-50%, 0); -moz-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -o-transform: translate(-50%, 0); transform: translate(-50%, 0);}
.first-info .title{font-size: 46px; line-height: 80px; font-weight: 700; padding-bottom: 14px;}
.first-info .title span{ margin-right: 84px; text-shadow: 2px 2px 0 #000;}
.first-info .sub-title{ font-size: 40px; line-height: 54px; font-weight: 400; padding-bottom: 48px;}
.first-info .other-text{ font-weight: 400; font-size: 30px; line-height: 42px;}
.first-info .other-text span{ display: inline-block; width: 75px; height: 75px; margin: 0 126px 0 20px; vertical-align: bottom;}

.first-img{ width: 29.58%; position: absolute; top: 214px; right: 18.75%; opacity: 0; z-index: 2; -webkit-transform: translate(50%, 0); -moz-transform: translate(50%, 0); -ms-transform: translate(50%, 0); -o-transform: translate(50%, 0); transform: translate(50%, 0);}
.first-img .bee{ width: 26.93%; position: absolute; bottom: 8%; left: -13%; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-transition: all .5s .7s; -moz-transition: all .5s .7s; -ms-transition: all .5s .7s; -o-transition: all .5s .7s; transition: all .5s .7s;}

.product{ width: 1200px; padding: 90px 62px 0 70px;}
.product:before{ content: ''; position: absolute; top: 210px; left: 0; width: 100%; height: 4px; background: url(../webimages/cimg10.png) 0 0 no-repeat; opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-transition: all .3s .2s; -moz-transition: all .3s .2s; -ms-transition: all .3s .2s; -o-transition: all .3s .2s; transition: all .3s .2s;}
.product li{ width: 33.3%; float: left; text-align: center; color: #fff; opacity: 0; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s;}
.product li img{ display: block; margin: 0 auto 24px;}
.product li .title{ font-size: 26px; font-weight: 400; line-height: 50px;}
.product li .text{ font-size: 26px; font-weight: 400; line-height: 50px;}

.product li:first-child{ -webkit-transform: translate(100%, 0); -moz-transform: translate(100%, 0); -ms-transform: translate(100%, 0); -o-transform: translate(100%, 0); transform: translate(100%, 0);}
.product li:last-child{ -webkit-transform: translate(-100%, 0); -moz-transform: translate(-100%, 0); -ms-transform: translate(-100%, 0); -o-transform: translate(-100%, 0); transform: translate(-100%, 0);}

.operate{ float: left; padding-left: 52px; width: 712px; -webkit-transform: translate(-50%, 0); -moz-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -o-transform: translate(-50%, 0); transform: translate(-50%, 0); opacity: 0;}
.operate-list{ float: left; width: 220px; height: 470px; padding: 78px 0 0 16px; background: url(../webimages/cimg13.png) 0 0 no-repeat;}
.operate-list li{ position: absolute; width: 192px; height: 329px; opacity: 0; z-index: 1; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s;}
.operate-list li.active{ opacity: 1; z-index: 2;}

.operate-cont{ float: left; padding-left: 44px;}
.operate-cont .title{ font-size: 36px; font-weight: 400; color: #333; line-height: 52px; padding-bottom: 32px;}
.operate-cont .text{ margin-top: 44px; cursor: pointer;}
.operate-cont .text .tip{ float: left; width: 84px; height: 84px; line-height: 84px; text-align: center; font-size: 24px; color: #fff; background-color: #959595; border-radius: 50%; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s;}
.operate-cont .text p{ float: left; padding: 10px 0 0 20px; line-height: 32px; font-size: 26px; color: #666;}
.operate-cont .text.active .tip{ background-color: #1ba3e2;}

.third-down{ float: right; width: 370px; -webkit-transform: translate(50%, 0); -moz-transform: translate(50%, 0); -ms-transform: translate(50%, 0); -o-transform: translate(50%, 0); transform: translate(50%, 0); opacity: 0;}
.third-down .logo{ display: block;}
.third-down .title{ font-size: 36px; color: #1ba3e2; line-height: 50px;}
.third-down .text{ font-size: 18px; color: #0b5c82; line-height: 30px; padding-bottom: 40px;}
.third-down .qr-code{ float: left; width: 154px; margin-right: 30px;}
.third-down .qr-code .tip{ color: #666; font-size: 16px; text-align: center; line-height: 30px;}

.problem-title{ color: #fff; text-align: center; font-weight: 400; padding-top: 104px; padding-bottom: 10px; border-bottom: 1px solid #424449;}
.problem-title .cn{ font-size: 36px; line-height: 40px;}
.problem-title .en{ font-size: 16px; line-height: 30px;}

.problem-list{ width: 1200px; padding: 65px 0 106px 118px; margin: 0 auto;
background: -webkit-radial-gradient( rgba(115, 115, 115, .2) 20%, rgba(0, 0, 0, .2) 80%); background: -o-radial-gradient( rgba(115, 115, 115, .2) 20%, rgba(0, 0, 0, .2) 80%); background: -moz-radial-gradient( rgba(115, 115, 115, .2) 20%, rgba(0, 0, 0, .2) 80%); background: radial-gradient( rgba(115, 115, 115, .2) 20%, rgba(0, 0, 0, .2) 80%); opacity: 0;}
.problem-list li{ color: #fff; padding: 0 50px 58px 56px; -webkit-transform: translate(0, 60px); -moz-transform: translate(0, 60px); -ms-transform: translate(0, 60px); -o-transform: translate(0, 60px); transform: translate(0, 60px); opacity: 0; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s;}
.problem-list li:nth-child(2){ transition-delay: .6s}
.problem-list li:nth-child(3){ transition-delay: 1.2s}
.problem-list li .title{ font-size: 32px; line-height: 60px;}
.problem-list li .text{ font-size: 26px; line-height: 44px;}

.problem-list li:first-child{ background: url(../webimages/cimg15.png) 0 17px no-repeat;}
.problem-list li:nth-child(2){ background: url(../webimages/cimg16.png) 0 17px no-repeat;}
.problem-list li:last-child{ background: url(../webimages/cimg17.png) 0 17px no-repeat;}

.copyright{ font-size: 24px; line-height: 248px; text-align: center; color: #fff;}

/*页面加载动画*/
.first-info.active,.first-img.active,.product.active li,.operate.active,.third-down.active,.problem-list.active,.problem-list.active li{ opacity: 1; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0);}
.product.active:before{ opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1);}
/*.first-img.active .bee{ -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1);}*/
.first-img.active .bee{ animation: beemove .5s linear .7s; -moz-animation: beemove .5s linear .7s; -webkit-animation: beemove .5s linear .7s;-o-animation: beemove .5s linear .7s; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1);}

/*.product.active li{ -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); opacity: 1;}*/

/*动画*/
/*小蜜蜂*/
@keyframes beemove{
    0%{transform: scale(0)}
    50%{transform: scale(1.2)}
    100%{transform: scale(1)}
}
@-moz-keyframes beemove{
    0%{transform: scale(0)}
    50%{transform: scale(1.2)}
    100%{transform: scale(1)}
}
@-webkit-keyframes beemove{
    0%{transform: scale(0)}
    50%{transform: scale(1.2)}
    100%{transform: scale(1)}
}
@-o-keyframes beemove{
    0%{transform: scale(0)}
    50%{transform: scale(1.2)}
    100%{transform: scale(1)}
}